<template>
    
  <div class="manage">
      <el-dialog :close-on-click-modal="false"  :title="operateType==='edit' ? '编辑用户' : '添加用户'" :visible.sync="isShow">

    <el-form :model="operateForm">
    <el-form-item label="姓名" >
      <el-input v-model="operateForm.name" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="年龄" >
      <el-input v-model="operateForm.age" autocomplete="off" ></el-input>
    </el-form-item>
  <el-form-item label="性别" >
        <el-select v-model="operateForm.sex" placeholder="Please select sex">
        <el-option label="男" value="1" ></el-option>
        <el-option label="女" value="0"></el-option>
      </el-select>
    </el-form-item>
     <el-form-item label="出生日期" >
       <div class="block">
    <span class="demonstration">请选择出生日期</span>
    <el-date-picker
      
      v-model="operateForm.birth"
      type="date"

      placeholder="请选择一个日期"
      format='yyyy-MM-dd HH:mm:ss'
      @change='selectDate'
      >
    </el-date-picker>
  </div>
    </el-form-item>
    <el-form-item label="地址" >
      <el-input v-model="operateForm.addr" autocomplete="off" ></el-input>
    </el-form-item>
    </el-form-item>
  </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="isShow = false">Cancel</el-button>
    <el-button type="primary" @click="confirm" >Confirm</el-button>
  </span>
    </el-dialog>


    <div class="manage-header">
      <el-row>
        <el-button type="primary" @click="addUser">+新增</el-button>
      </el-row>
      <myForm inline :formLable="formLable" :form="searchForm">
        <el-button type="primary" @click="getList(searchForm.keyword)">搜索</el-button>
      </myForm>
    </div>
    <div class="manage-content">
      <myTable
        :tableLabel="tableLabel"
        :tableData="tableData"
        :config="config"
        @changePage="getList"
        @editInfo="editUser"
        @deleteUser="delUser"
      ></myTable>
    </div>
  </div>
</template>

<script>
//@指向的是src
import myTable from "@/components/commonTable";
import myForm from "@/components/commonForm";
//引用momentjs处理时间格式化问题
var moment = require('moment');
moment().format();
export default {
  components: {
    myTable,
    myForm,
  },
  data() {
    return {
      //是新增还是编辑用户
      operateType: " ",
      //弹窗是否显示
      isShow: false,

      //搜索的关键字
      searchForm: {
        keyword: "",
      },
      //将搜索框中的关键字放入到表单的model中
      formLable: {
        model: "keyword",
        label: "",
      },
      tableLabel: [
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "age",
          label: "年龄",
        },
        {
          prop: "sex",
          label: "性别",
        },
        {
          prop: "birth",
          label: "出生日期",
        },
        {
          prop: "addr",
          label: "地址",
        },
      ],
      //要操作的表单数据
      operateForm: {
        addr: "",
        age: "",
        birth: "",
        name: "",
        sex: "",
      },
      tableData: [],
      config: {
        page: 1,
        total: 30,
        loading: false,
      },
    };
  },
  methods: {
    getList(name = "") {
      this.config.loading = true;
      // 搜索时，页码需要设置为1，才能正确返回数据，因为数据是从第一页开始返回的
      name ? (this.config.page = 1) : "";
      this.$http
        .get("/user/getUser", {
          params: {
            page: this.config.page,
            name,
          },
        })
        .then((res) => {
          this.tableData = res.data.list.map((item) => {
            item.sex = item.sex === 0 ? "女" : "男";
            return item;
          });
          this.config.total = res.data.count;
          this.config.loading = false;
        });
    },
    addUser() {
      this.operateForm = {};
      this.operateType = "add";
      this.isShow = true;
    },
    editUser(row) {
      this.operateType = "edit";
      this.isShow = true;
      this.operateForm = row;
      
    },
    confirm() {
      //如果是编辑用户信息
      this.config.loading=true
      if (this.operateType === "edit") {
        //将用户信息作为参数传入，在后台修改
        this.$http.post("/api/user/edit", this.operateForm).then((res) => {
          //修改完成后就隐藏弹窗
          this.isShow = false;
          //再重新展示用户
          this.getList();
        });
      } else {
        this.$http.post("/api/user/add", this.operateForm).then((res) => {
        
           //修改完成后就隐藏弹窗
          this.isShow = false;
          this.getList();
        });
      }
    },
    delUser(row) {
      //删除用户需要谨慎，再三确定
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let id = row.id;
          this.$http
            .get("/api/user/del", {
              params: {
                id,
              },
            })
            .then((res) => {
              console.log(res.data);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //选择的时间会有时区的差异，用momentjs对时间格式化处理
    selectDate(date){
     
     this.operateForm.birth=moment(date).format("YYYY-MM-DD")
    }
  },
  created() {
    this.getList();
  },
};
</script>

<style lang='scss' scoped>
@import "../../assets/scss/common.scss";
.el-input{
  width: 50%;
}
</style>